<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 20:12:40
-->
<template>
  <div id="bottom4Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Chart } from '@antv/g2';
export default{
  data() {
    return{};
  },
  methods: {
    initChart(){
      const data = [
            { item: '离线设备', count: 27, percent: 0.9 },
            { item: '在线设备', count: 3, percent: 0.1 },
          ];
          const chart = new Chart({
            container: 'bottom4Container',
            autoFit: true,
            height: 500,
          });
          chart.data(data);
          chart.scale('percent', {
            formatter: (val) => {
              val = val * 100 + '%';
              return val;
            },
          });
          chart.coordinate('theta', {
            radius: 0.8,
            innerRadius: 0.2,
          });
          chart.tooltip({
            showTitle: true,
            showMarkers: false,
            itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};fill: {#fff};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
          });
          // 辅助文本
          chart
            .annotation({
              style: {
                fontSize: 14,
                fill: '#fff',
              },
            })
            .text({
              position: ['50%', '50%'],
              content: '设备总数',
              style: {
                fontSize: 14,
                fill: '#fff',
                textAlign: 'center',
              },
              offsetY: 0,
            })
            .text({
              position: ['50%', '50%'],
              content: '30',
              style: {
                fontSize: 20,
                fill: '#fff',
                textAlign: 'center',
              },
              offsetX: -10,
              offsetY: 20,
            })
            
            .text({
              position: ['50%', '50%'],
              content: '台',
              style: {
                fontSize: 14,
                fill: '#fff',
                textAlign: 'center',
              },
              offsetY: 20,
              offsetX: 20,
            });
          chart
            .interval()
            .adjust('stack')
            .position('percent')
            .color('item')
            .label('percent', (percent) => {
              return {
                content: (data) => {
                  return `${data.item}: ${percent * 100}%`;
                },
              };
            })
            .tooltip('item*percent', (item, percent) => {
              percent = percent * 100 + '%';
              return {
                name: item,
                value: percent,
              };
            });
            

          chart.interaction('element-active');
        chart.theme({ "styleSheet": { "paletteQualitative10": [ "#1B9CD0", "#ABDFFF" ] } });
        chart.render();
    }
  },
  mounted() {
    this.initChart();
  },
}


</script>

